import React, { useState, useEffect } from 'react';
import { 
  Typography, Row, Col, Card, Button, Image, Descriptions, Tag,
  InputNumber, Breadcrumb, Tabs, Spin, message 
} from 'antd';
import { useParams, Link } from 'react-router-dom';
import { 
  ShoppingCartOutlined, 
  ShoppingOutlined,
  HeartOutlined,
  ShareAltOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;

// 模拟商品数据
const mockProducts = [
  {
    id: 1,
    name: 'iPhone 13 Pro',
    price: 7999,
    imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/24/wKj0iWTLe2mALDSVAAF0enjwEQA837.jpg',
    category: '电子产品',
    description: '苹果最新旗舰手机，搭载A15仿生芯片，超强性能',
    stock: 100,
    specs: {
      brand: 'Apple',
      model: 'iPhone 13 Pro',
      color: '远峰蓝',
      storage: '128GB',
      screen: '6.1英寸',
      camera: '三摄像头系统',
      battery: '3095mAh'
    },
    detail: `
      <h3>产品特点</h3>
      <ul>
        <li>超视网膜XDR显示屏，支持ProMotion自适应刷新率技术</li>
        <li>A15仿生芯片，性能强劲</li>
        <li>专业相机系统：超广角、广角和长焦三颗摄像头</li>
        <li>电影效果模式，为视频带来浅景深效果</li>
        <li>5G网络支持，高速下载和高质量流媒体</li>
        <li>最高可达22小时的视频播放时间</li>
      </ul>
    `,
    images: [
      'https://img01.71360.com/file/read/www/M00/4C/24/wKj0iWTLe2mALDSVAAF0enjwEQA837.jpg',
      'https://img01.71360.com/file/read/www/M00/4D/57/wKj0iGTcm1OAbA0ZAAHCkgZ0yzo252.jpg',
      'https://img01.71360.com/file/read/www/M00/4D/57/wKj0iGTcm1aABk81AAG9zCOaNNk394.jpg'
    ]
  },
  {
    id: 2,
    name: '华为 MateBook X Pro',
    price: 9999,
    imageUrl: 'https://img01.71360.com/file/read/www/M00/4C/1F/wKj0iWTLSnyAINrYAAFzHRZRZtw124.jpg',
    category: '电子产品',
    description: '轻薄笔记本，高性能处理器，长续航',
    stock: 50,
    specs: {
      brand: '华为',
      model: 'MateBook X Pro',
      cpu: 'Intel Core i7-1165G7',
      ram: '16GB',
      storage: '512GB SSD',
      screen: '13.9英寸 3K触控屏',
      weight: '1.33kg'
    },
    detail: `
      <h3>产品特点</h3>
      <ul>
        <li>超轻薄金属机身，便携易携带</li>
        <li>3K全面屏，91%屏占比</li>
        <li>第11代英特尔酷睿处理器，性能强劲</li>
        <li>指纹电源键，一键开机登录</li>
        <li>长达11小时续航，快速充电技术</li>
      </ul>
    `,
    images: [
      'https://img01.71360.com/file/read/www/M00/4C/1F/wKj0iWTLSnyAINrYAAFzHRZRZtw124.jpg',
      'https://img01.71360.com/file/read/www/M00/4C/1F/wKj0iWTLSnKAMVXEAAFPzgZZzeg072.jpg',
      'https://img01.71360.com/file/read/www/M00/4C/1F/wKj0iWTLSm2AV6UkAAFTKrJjxXM578.jpg'
    ]
  }
];

const ProductDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [product, setProduct] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [quantity, setQuantity] = useState(1);
  const [selectedImage, setSelectedImage] = useState('');

  useEffect(() => {
    // 模拟数据加载
    setLoading(true);
    setTimeout(() => {
      const foundProduct = mockProducts.find(p => p.id === Number(id));
      if (foundProduct) {
        setProduct(foundProduct);
        setSelectedImage(foundProduct.imageUrl);
      }
      setLoading(false);
    }, 500);
  }, [id]);

  const handleAddToCart = () => {
    message.success(`已添加 ${quantity} 件 ${product?.name} 到购物车`);
  };

  const handleBuyNow = () => {
    message.info('即将跳转到订单页面...');
    // 导航到订单页面的逻辑
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!product) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Title level={3}>商品不存在</Title>
        <Paragraph>
          <Link to="/products">返回商品列表</Link>
        </Paragraph>
      </div>
    );
  }

  return (
    <div className="product-detail-page">
      <Breadcrumb style={{ marginBottom: 16 }}>
        <Breadcrumb.Item>
          <Link to="/">首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to="/products">商品列表</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>{product.name}</Breadcrumb.Item>
      </Breadcrumb>
      
      <Card bordered={false}>
        <Row gutter={[24, 24]}>
          <Col xs={24} md={12}>
            <div style={{ textAlign: 'center' }}>
              <Image
                src={selectedImage}
                alt={product.name}
                style={{ maxWidth: '100%', maxHeight: '400px' }}
              />
              <div style={{ marginTop: 16, display: 'flex', justifyContent: 'center', gap: '8px' }}>
                {product.images.map((img: string, index: number) => (
                  <Image 
                    key={index}
                    src={img}
                    alt={`${product.name}-${index}`}
                    width={80}
                    height={80}
                    style={{ 
                      cursor: 'pointer', 
                      border: selectedImage === img ? '2px solid #1890ff' : '2px solid transparent',
                      borderRadius: '4px'
                    }}
                    onClick={() => setSelectedImage(img)}
                  />
                ))}
              </div>
            </div>
          </Col>
          
          <Col xs={24} md={12}>
            <Title level={2}>{product.name}</Title>
            <Tag color="blue">{product.category}</Tag>
            
            <div style={{ margin: '16px 0' }}>
              <Title level={3} type="danger" style={{ margin: 0 }}>
                ¥{product.price}
              </Title>
            </div>
            
            <Paragraph ellipsis={{ rows: 3 }}>
              {product.description}
            </Paragraph>
            
            <Descriptions title="商品规格" bordered column={1} style={{ marginBottom: 16 }}>
              {Object.entries(product.specs).map(([key, value]: [string, any]) => (
                <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
              ))}
            </Descriptions>
            
            <div style={{ margin: '16px 0' }}>
              <span style={{ marginRight: 12 }}>数量:</span>
              <InputNumber 
                min={1} 
                max={product.stock} 
                defaultValue={1} 
                onChange={(value) => setQuantity(value || 1)} 
              />
              <span style={{ marginLeft: 12 }}>库存: {product.stock}件</span>
            </div>
            
            <div style={{ margin: '24px 0', display: 'flex', gap: '12px' }}>
              <Button 
                type="primary" 
                size="large" 
                icon={<ShoppingCartOutlined />}
                onClick={handleAddToCart}
              >
                加入购物车
              </Button>
              <Button 
                type="primary" 
                danger 
                size="large" 
                icon={<ShoppingOutlined />}
                onClick={handleBuyNow}
              >
                立即购买
              </Button>
              <Button icon={<HeartOutlined />} size="large">收藏</Button>
              <Button icon={<ShareAltOutlined />} size="large">分享</Button>
            </div>
          </Col>
        </Row>
      </Card>
      
      <Card style={{ marginTop: 24 }}>
        <Tabs defaultActiveKey="detail">
          <TabPane tab="商品详情" key="detail">
            <div dangerouslySetInnerHTML={{ __html: product.detail }} />
          </TabPane>
          <TabPane tab="规格参数" key="specs">
            <Descriptions bordered column={2}>
              {Object.entries(product.specs).map(([key, value]: [string, any]) => (
                <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
              ))}
            </Descriptions>
          </TabPane>
          <TabPane tab="用户评价" key="reviews">
            <p>暂无评价</p>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default ProductDetailPage; 